<!--
 * @Description: 右侧第一个
 * @Author: Ronda
 * @Date: 2022-02-16 09:30:08
 * @LastEditors: liqi
 * @LastEditTime: 2022-09-07 19:18:28
-->
<template>
  <div ref="container" style="height: 95%"></div>
</template>

<script>
import { Scatter } from "@antv/g2plot";
export default {
  data() {
    return {};
  },
  computed: {},
  methods: {
    loadChart() {
      fetch(
        "https://gw.alipayobjects.com/os/antfincdn/t81X1wXdoj/scatter-data.json"
      )
        .then((res) => res.json())
        .then((data) => {
          const scatterPlot = new Scatter(this.$refs['container'], {
            appendPadding: 30,
            data,
            xField: "x",
            yField: "y",
            colorField: "genre",
            color: [
              "r(0.4, 0.3, 0.7) 0:rgba(255,255,255,0.5) 1:#5B8FF9",
              "r(0.4, 0.4, 0.7) 0:rgba(255,255,255,0.5) 1:#61DDAA",
            ],
            sizeField: "size",
            size: [5, 20],
            shape: "circle",
            yAxis: {
              nice: true,
              line: {
                style: {
                  stroke: "#eee",
                },
              },
            },
            xAxis: {
              grid: {
                line: {
                  style: {
                    stroke: "#eee",
                  },
                },
              },
              line: {
                style: {
                  stroke: "#eee",
                },
              },
            },
            tooltip: {
              domStyles: {
                "g2-tooltip": {
                  backgroundColor: "#03255f",
                  color: "#fff",
                },
              },
            },
          });
          scatterPlot.render();
        });
    },
  },
  created() {},
  mounted() {
    this.loadChart()
  },
};
</script>
<style scoped>
</style>